<template>
  <div class="thumbnail-list" ref="thumbnailListRef">
    <div :class="[v.checkbox ? 'active' : '', 'thumbnail-item']" v-for="(v, i) in dataArr" :key="i">
      <div class="icon">
        <template v-if="v.resUrl">
          <el-image v-if="v.resCover" :src="getResPath(v.resCover)" fit="cover" />
          <SvgIcon v-else icon-class="模型"></SvgIcon>
        </template>
        <template v-else>
          <el-button @click="onOption(v)" v-if="getStateClass(v) === 3">继续上传</el-button>
          <el-button @click="onOption(v)" v-if="getStateClass(v) === 4">重新转换</el-button>
          <SvgIcon v-if="[1, 2, 5].includes(getStateClass(v))" icon-class="模型"></SvgIcon>
          <SvgIcon
            class="warning"
            v-if="[4, 3].includes(getStateClass(v))"
            icon-class="警告"
          ></SvgIcon>
        </template>

        <el-checkbox v-model="v.checkbox" :key="v.userId" v-show="v.checkbox" @change="change" />
        <!-- 状态 -->
      </div>
      <p class="name" @dblclick="reNameChange(v)">{{ v.fileResName }}</p>
    </div>
  </div>
  <!-- 新建分类弹框 -->
  <el-dialog v-model="renameVisible" title="重命名" align-center class="category-model">
    <div class="category-input">
      <label>名称</label>
      <el-input v-model="renameName" placeholder="请输入新建子分类名称"></el-input>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="renameVisible = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="renameVisible = false" class="determine">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import Sortable from 'sortablejs';
import { thumbnailDataItem } from '../types';
import { getResPath } from '@/utils/cimup';
import { mergerFile } from '@/api/common';
import { reProcess } from '@/api/resource';
import { IResource } from '@/api/resource/types';
defineOptions({
  name: 'Thumbnail',
});
interface IProps {
  data: thumbnailDataItem[];
}

const props = withDefaults(defineProps<IProps>(), {
  data: () => [],
});

const emit = defineEmits(['operationalDataChange', 'checkboxChange', 'editDialog']);
const stateMap = new Map([
  [1, '处理中'],
  [2, '完成'],
  [3, '失败'],
  [21, '继续上传'], // 等待上传
  [22, '继续上传'], // 等待合并

  [23, '处理中'], // 合并中
  [24, '处理中'], // 完成合并
  [25, '重新转换'], // 合并失败

  [32, '处理中'], // 解压缩中
  [33, '处理中'], // 完成解压
  [34, '重新转换'], // 解压失败

  [42, '处理中'], // 数据处理中
  [43, '完成处理'], // 完成处理
  [44, '重新转换'], // 处理失败

  [52, '处理中'], // 传输中
  [53, '完成'], // 传输完成
  [54, '重新转换'], // 传输失败

  [63, '完成'], // 发布成功
  [64, '处理失败'], // 发布失败
]);
const getStateClass = (row: any) => {
  if (row.handleState === 53 || row.handleState === 63) {
    return 1; // 完成
  } else if (stateMap.get(row.handleState) === '处理中') {
    return 2; // 处理中
  } else if (row.handleState === 21 || row.handleState === 22) {
    return 3; // 继续上传
  } else if (row.handleState === 3 || row.handleState === 64) {
    return 5; // 重新转换
  } else {
    return 4; // 失败
  }
};
const selRow = ref<null | IResource>(null);
const isReUpload = ref(false);
async function onOption(item: IResource) {
  if ([21, 22, 23].includes(item.handleState)) {
    // 上传失败，合并失败走重新上传的逻辑
    isReUpload.value = true;
    selRow.value = item || null;
    emit('editDialog', { isReUpload: true, selRow: item || null });
  } else if (item.handleState === 25) {
    await mergerFile({ transId: item.transId });
    emit('operationalDataChange', true);
  } else {
    const fData = new FormData();
    fData.set('resourceId', item.resourceId);
    const param = {
      data: fData,
    };
    await reProcess(param);
    emit('operationalDataChange', true);
  }
}

const checkboxArr = ref<thumbnailDataItem[]>([]);
const dataArr = ref<any>([]);
watch(
  () => props.data,
  () => {
    checkboxArr.value = props.data.filter((it: any) => it.checkbox);
    dataArr.value = props.data;
  },
  {
    immediate: true,
    deep: true,
  }
);

const thumbnailListRef = ref();
const initSortThumbnail = () => {
  Sortable.create(thumbnailListRef.value, {
    fallbackOnBody: true,
    // 元素被选中
    onChoose: function (evt: any) {
      console.log(evt);
      // element index within parent
    },
    onEnd: (evt: Event) => {
      console.log(evt);
    },
    onStart: (evt: Event) => {
      evt.preventDefault();
    },
  });
};
const change = (res: any) => {
  console.log(res, props.data);
  emit('checkboxChange', props.data);
};

// 重命名
const renameVisible = ref(false);
const renameName = ref('');
const reNameChange = (item: any) => {
  renameVisible.value = true;
  renameName.value = item.fileResName;
};
// onMounted(() => {
//   dataArr.value = props.data;
//   console.log(dataArr.value, 'props.data', props.data);
//   // initSortThumbnail();
// });
</script>

<style lang="less" scoped>
.thumbnail-list {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow-y: auto;
  width: 100%;
  gap: 0 17px;
  .thumbnail-item {
    width: calc(20% - 15px);
    &:nth-child(5n) {
      margin-right: 0;
    }
    .icon {
      position: relative;
      height: 156px;
      background-color: #ededed;
      border: 2px solid #ededed;
      border-radius: 4px;
      overflow: hidden;
      .el-image {
        height: 100%;
        width: 100%;
      }
      .warning {
        position: absolute;
        right: 15px !important;
        top: 15px !important;
        left: auto !important;
        transform: none !important;
        font-size: 29px !important;
      }
      .el-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color: #0560fd;
        width: 88px;
        height: 32px;
        border-radius: 3px;
        background: rgba(5, 96, 253, 0.3);
        border: 1px solid #0560fd;
      }
      .svg-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 68px;
        fill: #959595;
      }
      .img {
        width: 100%;
        height: 100%;
      }
      .el-checkbox {
        position: absolute;
        top: -0px;
        right: -0px;
        height: 24px;
        width: 24px;
        :deep(.el-checkbox__inner) {
          height: 24px;
          width: 24px;
          &::after {
            border-width: 2px;
            height: 11px;
            width: 6px;
            left: 8px;
            top: 2px;
          }
        }
      }
    }

    &:hover,
    &.active {
      .icon {
        border: 2px solid #0560fd;
        .svg-icon {
          fill: #0560fd;
        }
        .el-checkbox {
          display: block !important;
        }
      }
    }
    .name {
      margin: 10px 0;
      font-size: 14px;
      color: fade(#161616, 100%);
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
  }
}
</style>
<style lang="less">
.category-model {
  &.determine {
    background: #0560fd;
    color: #fff;
  }
}
</style>
